<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>响应式菜单切换效果</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- <link rel="stylesheet" href="./css/menu.css" /> -->
	<style>
		* {
		  margin: 0;
		  padding: 0;
		  user-select: none;
		}
		li {list-style:none;}
		.banner {
		  height:300px;
		  background:red;
		  clear:both;
		  margin:0 auto;
		  font-size:30px;
		  text-align:center;
		  color:#fff;
		  line-height:300px;
		}
		.menu {
		  position:relative;
		  z-index:999;
		  width:1200px;
		  height:40px;
		  margin:0 auto;
		}
		.menu .logo {
		  float:left;
		  height:40px;
		  width:100px;
		  color:#fff;
		  font-size: 20px;
		  text-align:center;
		  line-height:40px;
		  background:blue;
		}
		.menu .sub {
		  display:block;
		  float:right;
		  height:40px;
		}
		.menu .sub.on{
		  display:block;
		}
		.menu .toggle-menu {
		  display:none;
		  float:right;
		}
		.menu .sub > li {
		  float:left;
		  width: 150px;
		  text-align:center;
		  background:#ccc;
		}
		.menu .sub>li span{
		  display:block;
		  height:40px;
		  line-height:40px;
		}
		.menu .sub>li ul {
		  height:0;
		  transition: all 2s;
		  overflow: hidden;
		  background:#eee;
		}
		.menu .sub>li ul.on {
		  height: auto;
		  transition: all 2s;
		}
		.menu .sub>li ul li {
		  height:40px;
		  line-height:40px;
		}
		/* .menu .sub>li:hover ul{
		  height: auto;
		  transition: all 2s;
		} */
		 
		.menu ul.toggle li {
		  height: 2px;
		  width: 35px;
		  background: blue;
		  margin-bottom: 10px;
		  list-style: none;
		  transition: all .2s;
		  opacity: 1;
		}
		 
		.menu .active li:nth-of-type(2) {
		  opacity: 0;
		}
		 
		.menu .active li:nth-of-type(1) {
		  transform: translateY(12px) rotate(45deg);
		}
		 
		.menu .active li:nth-of-type(3) {
		  transform: translateY(-12px) rotate(-45deg);
		}
		 
		@media screen and (max-width: 768px) {
		  .menu {
		    width: 100%;
		    box-shadow: 0 1px 2px #eee;
		  }
		  .menu .sub {
		    display: none;
		    width:100%;
		  }
		  .menu .sub>li {
		    width: 100%;
		    border-bottom:1px solid #eee;
		  }
		  .menu .toggle-menu {
		    position:relative;
		    top:5px;
		    right:5px;
		    display: block;
		  }
		}
	</style>
</head>
<body>
  <div class="menu">
    <div class="sub-menu">
      <div class="logo">logo</div>
      <div class="toggle-menu">
        <ul class="toggle">
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
      <ul class="sub">
        <li>
          <span>导航父菜单1</span>
          <ul class="child-menu">
            <li>导航子菜单1-1</li>
            <li>导航子菜单1-2</li>
            <li>导航子菜单1-3</li>
          </ul>
        </li>
        <li>
          <span>导航父菜单2</span>
          <ul class="child-menu">
            <li>导航子菜单2-1</li>
            <li>导航子菜单2-2</li>
            <li>导航子菜单2-3</li>
          </ul>
        </li>
        <li>
          <span>导航父菜单3</span>
          <ul class="child-menu">
            <li>导航子菜单3-1</li>
            <li>导航子菜单3-2</li>
            <li>导航子菜单3-3</li>
          </ul>
        </li>
        <li>
          <span>导航父菜单4</span>
          <ul class="child-menu">
            <li>导航子菜单4-1</li>
            <li>导航子菜单4-2</li>
            <li>导航子菜单4-3</li>
          </ul>
        </li>
        <li>
          <span>导航父菜单5</span>
          <ul class="child-menu">
            <li>导航子菜单5-1</li>
            <li>导航子菜单5-2</li>
            <li>导航子菜单5-3</li>
          </ul>
        </li>
        <li>
          <span>导航父菜单6</span>
          <ul class="child-menu">
            <li>导航子菜单6-1</li>
            <li>导航子菜单6-2</li>
            <li>导航子菜单6-3</li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
  <div class="banner">Banner</div>
</body>
<script>
  (function(){
    document.querySelector('.menu .toggle').onclick = function (e) {
      e.stopPropagation();
      this.classList.toggle('active');
      let menu = document.querySelector('.sub');
      menu.classList.toggle('on');
    };
    let subMenu = document.querySelectorAll('.sub > li');
    for (let i = 0, len = subMenu.length; i < len; i++) {
      (function (b){
        subMenu[b].onclick = function (e) {
        e.stopPropagation();
        // document.querySelector('.child-menu.on') && document.querySelector('.child-menu.on').classList.remove('on');
        for (let j = 0, lenj = subMenu.length; j < lenj; j++) {
          if (j !== b) {
            document.querySelectorAll('.child-menu')[j].classList.remove('on');
          }
        }
        this.querySelector('.child-menu').classList.toggle('on');
      }
      })(i);
    }
    document.onclick = function () {
      console.log(document.querySelector('.menu .toggle'));
      document.querySelector('.menu .toggle').classList.contains('active') && document.querySelector('.menu .toggle').click();
      document.querySelector('.child-menu.on') && document.querySelector('.child-menu.on').classList.remove('on');
    }
  })();
</script>
</html>